uniapp|从零创建一个新项目以及关于网络请求配置和分包

一、uni-app简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码&＃xff0c;可发布到 iOS、Android、H5、以及各种小程序&＃xff08;微信/支付宝/百度/头条/QQ/钉钉/淘宝&＃xff09;、快应用等多个平台。

二、开发工具

uni-app官方推荐使用HBuilderX来开发uni-app类型的项目。主要好处&＃xff1a;

• 模板丰富

• 完善的智能提示

• 一键运行

当然&＃xff0c;你可以根据自身喜好来选择编辑器。

三、新建uni-app项目

1. • 新建

   
   

文件-->新建-->项目

2. • 填写基本信息

   
   

成功后的界面&＃xff1a;

3. • 把项目运行到微信开发者工具

   
   

3.1 填写自己的微信小程序的AppId

3.2 在HBuilderX中&＃xff0c;配置“微信开发者工具”的安装路径

3.3 在微信开发者工具中&＃xff0c;通过【设置】->【安全设置】面板&＃xff0c;开启“微信开发者工具”的服务端口

3.4 在HBuilderX中&＃xff0c;点击菜单栏中的【运行】->【运行到小程序模拟器】->【微信开发者工具】&＃xff0c;将当前uni-app项目编译之后&＃xff0c;自动运行到微信开发者工具中&＃xff0c;从而 方便查看项目效果与调试

四、tabBar页面

4.1 创建tabbar页面&＃xff08;以商城为例)

在pages目录中&＃xff0c;创建首页&＃xff08;home&＃xff09;、分类&＃xff08;cate&＃xff09;、购物车&＃xff08;cart&＃xff09;、我的&＃xff08;my&＃xff09;这4个tabBar页面&＃xff0c;在HBuilderX中&＃xff0c;可以通过如下的两个步骤&＃xff0c;快速新建页面&＃xff1a;

1. 在pages目录上鼠标右键&＃xff0c;选择新建页面

2. 在弹出的窗口中&＃xff0c;填写页面的名称、勾选scss模板之后&＃xff0c;点击创建按钮。

4.2 配置tabBar效果

修改项目根目录中的pages.json配置文件&＃xff0c;新增tabBar的配置节点如下&＃xff1a;

{
"tabBar": {
"selectedColor": "#C00000",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/tab_icons/home.png",
"selectedIconPath": "static/tab_icons/home-active.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/tab_icons/cate.png",
"selectedIconPath": "static/tab_icons/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/tab_icons/cart.png",
"selectedIconPath": "static/tab_icons/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png"
}
]
}
}

4.3 删除默认的index首页

1. 在HBuilderX中&＃xff0c;pages目录下的index首页文件夹删除掉

2. 同时&＃xff0c;把page.json中记录的index首页路径删除掉

3. 为了防止小程序运行失败&＃xff0c;在微信开发者工具中&＃xff0c;手动删除pages目录下的index首页文件夹

4. 同时&＃xff0c;把components目录下的uni-link组件夹删除掉

4.4修改导航条的样式效果

1. 打开pages.json这个全局的配置文件

2. 修改globalStyle节点如下&＃xff1a;

{
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "黑马优购",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
}

创建一个新的uni-app项目基本已经介绍完了&＃xff0c;下面就说一些我在做这个小程序和之前的小程序&＃xff0c;新get到的一些快捷方法。

五、配置网络请求

由于平台的限制&＃xff0c;小程序项目中不支持axios&＃xff0c;而且原生的wx.request() API功能较为简单&＃xff0c;不支持拦截器等全局定制的功能。因此建议在uni-app项目中使用【&＃64;escook/request-miniprogram】第三方包发起网络数据请求。

官方文档&＃xff1a;
https://www.npmjs.com/package/&＃64;escook/request-miniprogram

最终&＃xff0c;在项目的main.js入口文件中&＃xff0c;通过如下的方式进行配置&＃xff1a;

import { $http } from &＃39;&＃64;escook/request-miniprogram&＃39;
uni.$http &＃61; $http
// 配置请求根路径
$http.baseUrl &＃61; &＃39;https://www.uinav.com&＃39;
// 请求开始之前做一些事情
$http.beforeRequest &＃61; function (options) {
uni.showLoading({
title: &＃39;数据加载中...&＃39;,
})
}
// 请求完成之后做一些事情
$http.afterRequest &＃61; function () {
uni.hideLoading()
}

六、配置小程序分包

分包可以减少小程序首次启动时的加载

为此&＃xff0c;我们在项目中&＃xff0c;把tabBar相关的4个页面放到主包中&＃xff0c;其它页面&＃xff08;例如&＃xff1a;商品详情页、商品列表页&＃xff09;放到分包中。在uni-app项目中&＃xff0c;配置分包的步骤如下&＃xff1a;

1. 在项目根目录中&＃xff0c;创建分包的根目录&＃xff0c;命名为subkg

2. 在pages.json中&＃xff0c;和pages节点平级的位置声明subPackages节点&＃xff0c;用来定义分包相关的结构